<template>
  <span class="image-upload-form-item">
    <span v-show="showPreview" class="image-preview">
      <span title="预览图片" class="image-preview-text">
        {{previewName}}
        <el-image class="image" :preview-src-list="srcList" src="https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg" ></el-image>
      </span>
      <i class="el-icon-circle-close" @click="handleDeleteImages" title="删除图片"></i>
    </span>
    <el-upload
      v-show="!showPreview"
      style="display:inline-block"
      :class="className"
      :action="action"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :on-success="handleSuccess"
      :before-upload="beforeUpload"
      :before-remove="beforeRemove"
      :limit="1"
      :show-file-list="showFileList"
      :on-exceed="handleExceed"
      :file-list="fileList"
      :type-list="typeList"
      :multiple="multiple">
        <el-button :loading="uploading" size="small" :type="buttonType">{{buttonText}}</el-button>
        <div v-if="showHint" slot="tip" class="el-upload__tip">
          只能上传{{typeList}}文件
        </div>
    </el-upload>
  </span>
</template>
<script>
export default {
  name: 'AnnexUploadButton',
  props: {
    className: {
      type: String,
      default: 'upload-btn'
    },
    buttonText: {
      type: String,
      default: '上传附件'
    },
    buttonType: {
      type: String,
      default: 'primary'
    },
    action: {
      type: String,
      default: '/srm-admin/annex/upload'
    },
    showHint: {
      type: Boolean,
      default: false
    },
    showFileList: {
      type: Boolean,
      default: false
    },
    typeList: {
      type: String,
      default: 'jpg/jpge/png'
    },
    multiple: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      uploading: false,
      fileList: [],
      srcList: [
        'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
        'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
      ]
    }
  },
  computed: {
    showPreview () {
      return this.fileList.length > 0
    },
    previewName () {
      if (this.showPreview) {
        return this.fileList[0].name
      }
      return ''
    }
  },
  methods: {
    handlePreviewImages () {

    },
    handleDeleteImages () {
      this.fileList = []
      // 值回显父组件
      this.$emit('input', '');
      // change事件
      this.$emit('change', '')
    },
    handlePreview (x) {
      // console.log('handlePreview :>> ', x);
    },
    beforeRemove (x) {
      // console.log('beforeRemove :>> ', x);
    },
    beforeUpload (file) {
      this.uploading = true
      const type = file.name.split('.').slice(-1)[0]
      if (!this.typeList.includes(type)) {
        this.uploading = false
        this.$message.error(`只能上传${this.typeList}文件`)
        return false
      }
    },
    handleRemove (x) {
      // console.log('handleRemove :>> ', x);
    },
    handleExceed (x) {
      // console.log('handleExceed :>> ', x);
    },
    handleSuccess (response, file, fileList) {
      console.log('handleSuccess :>> ', { response, file, fileList });
      this.fileList = fileList

      this.uploading = false
      this.$emit('onUploaded', { response, file })

      // 值回显父组件
      this.$emit('input', response.result);
      // change事件
      this.$emit('change', response.result)
    }
  },
}
</script>
<style scoped>
.image-preview {
  user-select: none;
  display: flex;
  /* align-content: center; */
  align-items: center;
}
.image-preview i {
  font-size: 18px;
  color: #2D8cF0;
  cursor: pointer;
  margin-left: 4px;
}
.image-preview-text {
  color: #2D8cF0;
  position: relative;
}
.image {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  opacity: 0;
}
</style>
